<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->  
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
    <title>AI-Blocks - Documentation</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">    
    <link rel="shortcut icon" href="favicon.ico">  
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!-- Global CSS -->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">   
    <!-- Plugins CSS -->    
    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="assets/plugins/prism/prism.css">
    <link rel="stylesheet" href="assets/plugins/elegant_font/css/style.css">
    
    <!-- Theme CSS -->
    <link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
</head> 

<body class="body-green">
    <div class="page-wrapper">
        <!-- ******Header****** -->
        <header id="header" class="header">
            <div class="container">
                <div class="branding" style="text-transform:initial">
                    <h1 class="logo">
                       <a href="index.html"><img src="images/logo.png" width="170"/></a>
                    </h1>
                </div><!--//branding-->
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
                    <li class="active">Documentation</li>
                </ol>
            </div><!--//container-->
        </header><!--//header-->
        <div class="doc-wrapper">
            <div class="container">
                <div id="doc-header" class="doc-header text-center">
                    <h1 class="doc-title"><i class="icon fa fa-paper-plane"></i> Documentation</h1>
                    <div class="meta"><i class="fa fa-clock-o"></i> Last updated: Nov 27th, 2017</div>
                </div><!--//doc-header-->
                <div class="doc-body">
                    <div class="doc-content">
                        <div class="content-inner">
                            <section id="download-section" class="doc-section">
                                <h2 class="section-title">Download</h2>
                                <div class="section-block">
                                    <p>To get started, download the latest version from the Github repo.
                                    </p>
                                    <a href="https://github.com/MrNothing/AI-Blocks/releases" class="btn btn-green" target="_blank"><i class="fa fa-download"></i> Download AI-Blocks</a>
                                </div>
                            </section><!--//doc-section-->
                            <section id="installation-section" class="doc-section">
                                <h2 class="section-title">Installation</h2>
                                <div id="step1"  class="section-block">
                                    <h3 class="block-title">Launching AI-Blocks.</h3>
                                    <p>Unpack the .7z archive and launch the AI-Blocks executable.</p>
                                </div><!--//section-block-->
                                <div id="step2"  class="section-block">
                                    <h3 class="block-title">Dependencies</h3>
                                    <p>Building and running scenes requires <a href="http://python.org">Python</a> and <a href="http://tensorflow.org">Tensorflow</a></p>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <h6>Installing Python:</h6>
                                            <ul class="list">
                                                <li>Install with Anacona: <a href="https://anaconda.org/">https://anaconda.org/</a></li>
                                                <p>or</p>
        										<li>Download from python.org: <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
        									</ul>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <h6>Installing Tensorflow</h6>
                                             <ul class="list">
                                                <li><div class="code-block">
                                                        <h6>Pip installation: </h6>
                                                        <p><code>pip install tensorflow</code></p>
                                                        <p>or</p>
                                                        <p><code>pip install tensorflow-gpu</code></p>
                                                    </div><!--//code-block-->
                                                </li>
                                                <li>Full guide: <a href="https://www.tensorflow.org/install/">https://www.tensorflow.org/install/</a></li>
                                            </ul>
                                        </div>
                                    </div><!--//row-->
                                </div><!--//section-block-->
                                <div id="step3"  class="section-block">
                                    <h3 class="block-title">Testing your installation</h3>
                                    <p>Create a new project from the examples.
                                    </p>
                                     <p>When a project is loaded simply press the "Play" button to run the active scene.</p>
                                    <p><img src="https://raw.githubusercontent.com/MrNothing/AI-Blocks/master/ScreenShots/sc6.png"></p>
                                    <p>You should see console messages saying that the scene is running.</p>
                                </div><!--//section-block-->
                            </section><!--//doc-section-->
                            
                            <section id="code-section" class="doc-section">
                                <h2 class="section-title">User Guide</h2>
                                <div class="section-block">
                                    <p>
                                        Welcome to AI-Blocks!
                                    </p>
                                    <p>
                                        To create a new project, launch AI-Blocks and press the "new project" button, you can choose to start a new project from one of the built-in examples.
                                    </p>
                                    <p>Once you have loaded a project, you should see four main panels:</p>
                                    <p><img src="images/sc1.png" width="600"/></p>
                                    
                                </div><!--//section-block-->

                                 <div id="objects" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Objects</h6>
                                    <div class="section-block">
                                        <p>The objects are the building blocks of your projects, they are shown on the scene and the hierarchy panel. They contain scripts and represent the modular pieces of your project.</p>
                                        <p>To add a new object, simply press the "insert" button from the Hierarchy panel.</p>
                                        <p><img src="images/addobject.png"/></p>
                                        <p>A popup will appear, allowing you to chose to create either an empty object, or a predefined object.</p>
                                        <p><img src="images/insertprefab.png"/></p>
                                        <p>Objects can be dragged in the scene, and resized. To select an object, simply click on it.</p>
                                        
                                    </div>
                                </div><!--//section-block-->

                                <div id="scene" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Scenes</h6>
                                    <div class="section-block">
                                        <p>The scene window is the main panel of your project.</p>
                                        <p>A scene can be interpreted as a standalone python program. Every active object in a scene is an instance of a script, that has python code in it.</p>
                                        <p>To switch between scenes, use the scenes tab. When you press the Build or Play button, only the active scene will be built.</p>
                                        <p><img src="images/scene_select.png"/></p>
                                        <p>The active scene can be zoomed with mouse scroll. To select a group of objects, press ctrl+click</p>
                                        
                                    </div>
                                </div><!--//section-block-->

                                 <div id="hierarchy" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Hierarchy</h6>
                                    <div class="section-block">
                                        <p><img src="images/hierarchy.png"/></p>
                                        <p>The hierarchy window displays every object that you see in the scene, but in a sorted way, allowing you to see parents of objects and the render order. You can swich object's hierarchy and order by dragging them.</p>
                                    </div>
                                </div><!--//section-block-->

                                <div id="properties" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Properties</h6>
                                    <div class="section-block">
                                        <p><img src="images/properties.png"/></p>
                                        <p>The properties panel displays the object's properties. If a script is attached to an object, its public variables will be displayed on the properties panel. For more informations on variables, see the <a href="#vars">Editor Variables</a>.</p>
                                    </div>
                                </div><!--//section-block-->

                                 <div id="scripts" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Scripts</h6>
                                    <div class="section-block">
                                        <p><img  width="700" src="images/scripts.png"/></p>
                                        <p>A script is a modular component that contains Python code. Every script that is attached to an object is a different instance of that script, with specific public values set by the user in the properties panel.</p>
                                        <p>To attach a script to an object, click on the "add script" button on the properties .</p>
                                        <p><img src="images/addscript.png"/></p>
                                        <p>Then select a script from the Project browser. All the scripts in your project will be displayed here. From here, you can either select an existing script or create a new one.</p>
                                        <p><img width="300" src="images/selectscript.png"/></p>
                                        <p>If you click on the create new script button, the script creation interface will show up.</p>
                                        <p><img width="300" src="images/createscript.png"/></p>
                                        <p>Selecting a template will create a script with built-in code.</p>
                                        <p>Note that creating scripts manually also works. Any manually added file will show in the Project Panel.</p>
                                        
                                        <p>To edit a script, press the small "edit" icon in the properties window. The default application associated to .py files will open the script. Make sure you have properly set the default application before using the edit button.</p>
                                        <p><img src="images/editscript.png"/></p>

                                        <div class="callout-block callout-danger">
                                        <div class="icon-holder">
                                            <i class="fa fa-exclamation-triangle"></i>
                                        </div><!--//icon-holder-->
                                        <div class="content">
                                            <h4 class="callout-title">Warning</h4>
                                            <p>Editing built-in scripts will modify them for other projects as well! It is recommended to make a copy of those scripts or create a project from a template.</p>
                                        </div><!--//content-->
                                        </div><!--//callout-block-->
                                        <p>That being said, it can be helpful to open built-in scripts, just make sure you know what you are doing :)</p>

                                    </div>
                                    <h2 class="section-title"></h2>
                                    <div class="section-block">
                                    <p>Along with <a href="#vars">Editor Variables</a>, some commented keywords are parsed by the Editor to set some script parameters.</p>
                                     <ul class="list">
                                        <li>description</li>
                                            <p>A short script description. This is displayed in the script selection interface and the project panel.</p>
                                                <pre><code class="language-python">
#description A test script 
                                                </code></pre>
                                            </p>
                                       <li>icon</li>
                                            <p>The css class for the script icon font material. Allowed values are <a href="https://www.w3schools.com/icons/fontawesome_icons_webapp.asp">Font Awesome</a> and <a href="https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp">Glyphicons</a>.</p>
                                                <pre><code class="language-python">
#icon fa-fa-cube
                                                </code></pre>
                                            </p>
                                        <li>Main</li>
                                            <p>The scene's starting point. If targets a function. If it is set, this is where the program will start from when you press the "play" button or when you build a scene.</p>
                                                <pre><code class="language-python">
#MAIN=Run

def Run():
    Log("Hi from object: "+self.name)
                                                </code></pre>
                                            </p>
                                    </ul>
                                    </div><!--//section-block-->
                                </div><!--//section-block-->

                                <div id="vars" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Editor Variables</h6>
                                    <div class="section-block">
                                        <p>Scripts can have public properties that are visible in the Editor.</p>
                                        <p>Every Editor variable is declared with a <b>#param</b> header:</p>
                                        <p><img src="https://raw.githubusercontent.com/MrNothing/AI-Blocks/master/ScreenShots/sc3.png" width="500"/></p>
                                        <p>When you modify a script, the Editor variables are updated in real time, except when a scene is running.</p>
                                        <p>Here is an exhaustive list of supported Editor variables types:
                                            <ul class="list">

                                                <li>string</li>
                                                <p>
                                                    <pre><code class="language-python">
#param string 
myString = "hello word"
                                                    </code></pre>
                                                </p>

                                                <li>integer</li>
                                                <p>
                                                    <pre><code class="language-python">
#param integer 
myInt = 1
                                                    </code></pre>
                                                </p>

                                                <li>float</li>
                                                <p>
                                                    <pre><code class="language-python">
#param float 
myFloat = 1
                                                    </code></pre>
                                                </p>

                                                <li>eval</li>
                                                <p>Allows the user to type math operations in the inspector. They are evaluated with javascript's <b>eval()</b></p>
                                                <p>
                                                    <pre><code class="language-python">
#param eval 
myEval = 10*2
                                                    </code></pre>
                                                </p>

                                                <li>bool</li>
                                                <p>
                                                    <pre><code class="language-python">
#param bool 
myBool = True
                                                    </code></pre>
                                                </p>

                                                <li>folder</li>
                                                <p>When editing this field from the editor, a folder browser window will appead.</p>
                                                <p>
                                                    <pre><code class="language-python">
#param folder 
myString = "C:/Users/Documents/Bob/Projects/"
                                                    </code></pre>
                                                </p>

                                                <li>file</li>
                                                <p>When editing this field from the editor, a file browser window will appead.</p>
                                                <p>
                                                    <pre><code class="language-python">
#param file 
myString = "C:/Users/Documents/Bob/Projects/foo.bar"
                                                    </code></pre>
                                                </p>

                                                <li>object</li>
                                                <p>A reference to an object, when an object references an other, a line will show in the scene.</p>
                                                <p>
                                                    <pre><code class="language-python">
#param object 
myObject = None
                                                    </code></pre>
                                                </p>


                                                <li>list</li>
                                                <p>Displays a dropdown list in the Editor. Allowing the user to choose from one of the elements in the list.</p>
                                                <p>
                                                    <pre><code class="language-python">
#param list:red, blue, greed
mySelection = "red"
                                                    </code></pre>
                                                </p>


                                                <li>array</li>
                                                <p>Displays an editable array in the Editor. Arrays can be of the following types: <i>string, integer, float, bool, file, folder, object</i>.</p>
                                                <p>
                                                    <pre><code class="language-python">
#param array|string
myStringArray = ["one", "two", "three", "four"]

#param array|object
myObjectsArray = []
                                                    </code></pre>
                                                </p>

                                                <li>Zones</li>
                                                <p>Zones allow you to show or hide one or many variables inside a zone depending on a condition.</p>
                                                <p>In this example, the <b>foo</b> variable will only be visible in the Editor if the <b>bar</b> variable equals "True":</p>
                                                <p>
                                                    <pre><code class="language-python">

#param bool
bar = False

#zone bar==True

#param string
foo = "I am visible!"

#endzone
                                                    </code></pre>
                                                </p>

                                            </ul>

                                            <p>One last thing worth mentioning is that Editor variables can only be called from <b>self</b>. This is because they actually are public class properties.</p>
                                            <p>Here for example, to access the <b>foo</b> propery within my script, i need to do this:</p>
                                                                                            <p>
                                                    <pre><code class="language-python">

#param string
foo = "hello word"

Log("foo: "+self.foo)
                                                    </code></pre>
                                                </p>
                                                
                                        </p>
                                    </div>
                                </div><!--//section-block-->

                                 <div id="build" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Building a scene</h6>
                                    <div class="section-block">
                                        <p>To build a scene, click on the build button, a popup will appear.</p>
                                        <p><img src="images/buildbut.png"/></p>
                                        <p>Select the folder where you want to build and click the build button.</p>
                                        <p>A python script called <i>main.py</i> will be generated. It is a standalone script that can be run without AI-Blocks, but still requires python and Tensorflow to run.</p>
                                    </div>
                                </div><!--//section-block-->

                                 <div id="run" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Running a scene</h6>
                                    <div class="section-block">
                                        <p>To run a scene, simply click on the "play" button.</p>
                                        <p><img src="images/newrun.png"/></p>
                                        <p>You can cancel the run any time by pressing on the "stop" button next to it.</p>
                                    </div>
                                </div><!--//section-block-->
                                
                            </section><!--//doc-section-->

                            <section id="python-api" class="doc-section">
                                <h2 class="section-title">Python API</h2>
                                <div id="Globals" class="section-block"><!--section-block-->
                                    <h6 class="section-title">Globals</h6>
                                    <div class="section-block">
                                        <p>These properties and functions are always avaliable from any script.</p>
                                        <li>Scripts</li>
                                                <p>Here is a list of built-in script parameters:</p>
                                                <p>
                                                    <pre><code class="language-python">
self.id #the id of the object this script was attached to
self.name #the name of the object this script was attached to
                                                    </code></pre>
                                                </p>
                                        <li>Global variables</li>
                                                <p>
                                                    <pre><code class="language-python">
NaN #None equivalent for compatibility when eval fails
                                                    </code></pre>
                                                </p>
                                        <li>Global functions</li>
                                                <p>the flush parameter is used to flush the stdout and stdin buffers.</p>
                                                <p>
                                                    <pre><code class="language-python">
#shows a message in the console
#ignore errors: uses msg.encode(sys.stdout.encoding, errors='replace')
Log(msg, flush=True, ignore_errors=False)

#shows an error message in the console
LogErr(msg, flush=False) 

#set the status bar for the target object (0 to 1)
SetState(id, state, flush=True) 

#send a value for a chart widget
SendChartData(id, name, value, color='#3e95cd', flush=True) 

#send a value for a pie chart widget
SendPieData(id, name, color='#3e95cd', flush=True)  

#send an image to an image viewer widget
#data contains an array or normalized inputs (from 0 to 1)
SendImageData(id, data, width=32, height=32, name="", rgba=False, flush=True, invert=False, offset=0) 

#send an matplotlib plot to an image viewer widget
SendGraph(id, data, data2=None, name="", offset=0, flush=True)
                                                    </code></pre>
                                                </p>
                                    </div>
                                </div><!--//section-block-->

                                 <div id="AIBlocks" class="section-block"><!--section-block-->
                                    <h6 class="section-title">AIBlocks</h6>
                                    <div class="section-block">
                                        <p>The AIBlocks namespace contains wrappers for Tensorflow</p>
                                       
                                            <li>InitModel</li>
                                            <p>Initializes a Tensorflow model.</p>
                                            <p><b>load_path</b> is an folder path that can be either empty or contains a saved Tensorflow state with the same model. If empty, will not load any model.</p>
                                            <p>returns <b>instance</b> is an instance of the <a href="#TFInstance">TFInstance</a> class.</p>
                                            <p>
                                                <pre><code class="language-python">
instance = AIBlocks.InitModel(load_path="")
                                                </code></pre>
                                            </p>

                                            <li>SaveModel</li>
                                            <p><b>instance</b> is an instance of the <a href="#TFInstance">TFInstance</a> class.</p>
                                            <p><b>save_path</b> is a folder containing a saved Tensorflow state. If empty, it will get check the initial load_path specified in <bInitModel</b>, if it is empty too, it will do nothing.</p>
                                            <p>
                                            <p>
                                                <pre><code class="language-python">
AIBlocks.SaveModel(instance, save_path)
                                                </code></pre>
                                            </p>


                                            <li>CloseSession/CloseInstance</li>
                                            <p>Closes a tensorflow session.</p>
                                            <p><b>instance</b> is an instance of the <a href="#TFInstance">TFInstance</a> class.</p>
                                            <p>
                                                <pre><code class="language-python">
AIBlocks.CloseSession(instance)
AIBlocks.CloseInstance(instance)
                                                </code></pre>
                                            </p>



                                    </div>
                                </div><!--//section-block-->

                                <div id="TFInstance" class="section-block"><!--section-block-->
                                    <h6 class="section-title">TFInstance</h6>
                                    <div class="section-block">
                                        <p>Contains state variables for an active Tensorflow session.</p>
                                       <p>
                                            <pre><code class="language-python">
#get a new TFInstance instance
instance = AIBlocks.InitModel(load_path="")

feed_dict = {x:data}

#example usages of TFInstance objects:
instance.Run(self, tensors, feed_dict):
instance.session.run(tensors, feed_dict=feed_dict)
                                            </code></pre>
                                        </p>
                                    </div>
                                </div><!--//section-block-->

                            </section><!--//doc-section-->
                            
                            </section><!--//doc-section-->
                        </div><!--//content-inner-->
                    </div><!--//doc-content-->
                    <div class="doc-sidebar hidden-xs">
                        <nav id="doc-nav">
                            <ul id="doc-menu" class="nav doc-menu" data-spy="affix">
                                <li><a class="scrollto" href="#download-section">Download</a></li>
                                <li>
                                    <a class="scrollto" href="#installation-section">Installation</a>
                                    <ul class="nav doc-sub-menu">
                                        <li><a class="scrollto" href="#step1">Launching AI-Blocks</a></li>
                                        <li><a class="scrollto" href="#step2">Dependencies</a></li>
                                        <li><a class="scrollto" href="#step3">Testing your installation</a></li>
                                    </ul><!--//nav-->
                                </li>
                                <li>
                                    <a class="scrollto" href="#code-section">User Guide</a>
                                    <ul class="nav doc-sub-menu">
                                        <li><a class="scrollto" href="#objects">Objects</a></li>
                                        <li><a class="scrollto" href="#scene">Scenes</a></li>
                                        <li><a class="scrollto" href="#hierarchy">Hierarchy</a></li>
                                        <li><a class="scrollto" href="#properties">Properties</a></li>
                                        <li><a class="scrollto" href="#scripts">Scripts</a></li>
                                        <li><a class="scrollto" href="#vars">Editor Variables</a></li>
                                        <li><a class="scrollto" href="#build">Building a scene</a></li>
                                        <li><a class="scrollto" href="#run">Running a scene</a></li>
                                    </ul><!--//nav-->
                                </li>

                                 <li>
                                    <a class="scrollto" href="#python-api">Python API</a>
                                    <ul class="nav doc-sub-menu">
                                        <li><a class="scrollto" href="#Globals">Globals</a></li>
                                        <li><a class="scrollto" href="#AIBlocks">AIBlocks</a></li>
                                        <li><a class="scrollto" href="#TFInstance">TFInstance</a></li>
                                        <li><a class="scrollto" href="#less">TextHelper</a></li>
                                        <li><a class="scrollto" href="#sass">Math</a></li>
                                    </ul><!--//nav-->
                                </li>
                            </ul><!--//doc-menu-->
                        </nav>
                    </div><!--//doc-sidebar-->
                </div><!--//doc-body-->              
            </div><!--//container-->
        </div><!--//doc-wrapper-->
        
    </div><!--//page-wrapper-->
    
    <footer id="footer" class="footer text-center">
        <div class="container">
            <!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can check out other license options via our website: themes.3rdwavemedia.com */-->
            <small class="copyright">Designed with <i class="fa fa-heart"></i> by <a href="http://themes.3rdwavemedia.com/" targe="_blank">Xiaoying Riley</a> for developers</small>
            
        </div><!--//container-->
    </footer><!--//footer-->
    
     
    <!-- Main Javascript -->          
    <script type="text/javascript" src="assets/plugins/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/plugins/prism/prism.js"></script>    
    <script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>                                                                
    <script type="text/javascript" src="assets/plugins/jquery-match-height/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    
</body>
</html> 

